function qs(ele) {
    return document.querySelector(ele)

}

// 接口地址：https://www.apifox.cn/apidoc/shared-36f0cbc0-9064-44bc-850a-805e263bf494/api-25827426

axios.defaults.baseURL = 'http://124.223.14.236:3001/api';

async function fn() {
    //省渲染
    const { data: { data: provinceData } } = await axios.get('/city/province')
        // console.log(provinceData)
    const provinceStr = provinceData.map(item => `
    <option value="${item.province}">${item.name}</option>
    `).join('')
    qs('#province').innerHTML = '<option value="">请选择省份</option>' + provinceStr

    qs('#province').value = 34

    //市渲染
    const { data: { data: cityData } } = await axios.get('/city/city', {
        params: {
            provinceCode: '34',
        }
    })
    console.log(cityData)
    const cityStr = cityData.map(item => `
    <option value="${item.city}">${item.name}</option>
    `).join('')
    qs('#city').innerHTML = '<option value="">请选择市</option>' + cityStr

    qs('#city').value = "01"
        //区渲染
    const { data: { data: areaData } } = await axios.get('/city/area', {
        params: {
            provinceCode: '34',
            cityCode: '01'
        }
    })
    console.log(areaData)
    const areaStr = areaData.map(item => `
    <option value="${item.area}">${item.name}</option>
    `).join('')
    qs('#county').innerHTML = '<option value="">请选择区</option>' + areaStr

    qs('#county').value = "02"
}

fn()

//省的change事件
qs("#province").addEventListener('change', async function() {
        console.log(this.value);
        //市渲染
        const { data: { data: cityData } } = await axios.get('/city/city', {
            params: {
                provinceCode: this.value,
            }
        })
        console.log(cityData)
        const cityStr = cityData.map(item => `
  <option value="${item.city}">${item.name}</option>
  `).join('')
        qs('#city').innerHTML = '<option value="">请选择省份</option>' + cityStr

        qs('#county').innerHTML = '<option value="">请选择市</option>'
    })
    //市的change事件
qs("#city").addEventListener('change', async function() {
    console.log(this.value);
    //区渲染
    const { data: { data: areaData } } = await axios.get('/city/area', {
        params: {
            provinceCode: qs("#province").value,
            cityCode: this.value
        }
    })
    console.log(areaData)
    const areaStr = areaData.map(item => `
      <option value="${item.area}">${item.name}</option>
      `).join('')
    qs('#county').innerHTML = '<option value="">请选择区</option>' + areaStr

})